<template>
  <div>
    <el-button
      type="primary"
      size="mini"
      icon="el-icon-plus"
      plain
      @click="handlePointRules"
      >配置</el-button
    >
    <el-table
      :data="pointRulesTableData"
      style="width: 100%">
      <el-table-column prop="pointValue" align="center" label="值" width="60">
        <template #default="{row}">
          <el-input v-model="row.pointValue" placeholder="请输入大于0的整数" />
        </template>
      </el-table-column>
      <el-table-column prop="descriptions" align="center" label="值的描述" width="80">
        <template #default="{row}">
          <el-input v-model="row.descriptions" placeholder="请输入值的描述" />
        </template>
      </el-table-column>
      <el-table-column prop="pointValue" align="center" label="图片地址">
        <template #default="{row}">
          <customUpload v-model="row.imgUrl" @change="handleImgChangeDirect($event,row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="pointRulesVisible"
      width="800px"
      :before-close="handleClose"
    >
      <el-button type="primary" @click="handleAddPointRule">新增规则</el-button>
      <el-table
        :data="pointRulesTableDataDialog"
        style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column prop="pointValue" align="center" label="参数值" width="80">
          <template #default="{row}">
            <el-input v-model="row.pointValue" placeholder="请输入大于0的整数" />
          </template>
        </el-table-column>
        <el-table-column prop="descriptions" align="center" label="值的描述">
          <template #default="{row}">
            <el-input v-model="row.descriptions" placeholder="请输入值的描述" />
          </template>
        </el-table-column>
        <el-table-column prop="pointValue" align="center" label="值对应图片地址">
          <template #default="{row}">
            <customUpload v-model="row.imgUrl" @change="handleImgChange($event,row)" />
          </template>
        </el-table-column>
        <el-table-column prop="imgPriview" align="center" label="图片预览">
          <template #default="{row}">
            <el-image
              v-if="row.imgUrl"
              style="width: 100px; height: 100px"
              :src="row.imgUrl"
              :preview-src-list="[row.imgUrl]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="actions" align="center" label="操作">
          <template #default="scope">
            <el-button type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSaveClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import customUpload from "./customUpload.vue";

export default {
  name: "PointRuleComponents",
  model: {
    prop: "formData",
    event: "input"
  },
  props: {
    formData: Array,
    data: Object,
  },
  components: {
    customUpload,
  },
  data() {
    return {
      title: '标题',
      pointRulesVisible: false,
      pointRulesTableData: [],
      pointRulesTableDataDialog: [],
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.pointRulesTableData = []
        this.pointRulesTableDataDialog = []
        if(this.formData != null && this.formData.length > 0) {
          this.formData.forEach(v => {
            this.pointRulesTableData.push(v)
          })
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 弹出框关闭
    handleClose() {
      this.pointRulesVisible = false;
    },
    /*取消按钮*/
    handleCancel() {
      this.pointRulesVisible = false
    },
    // 确定
    handleSaveClick() {
      let list = []
      this.pointRulesTableDataDialog.forEach(v => {
        list.push(v)
      })
      this.pointRulesVisible = false
      this.pointRulesTableData = [...list]
      this.pointRulesTableDataDialog = [...list]
      this.$emit("input", list);
      this.$emit("change", list);
    },
    // 删除
    handleDelete(index) {
      this.pointRulesTableDataDialog.splice(index, 1);
    },
    /*打开参数点规则弹窗*/
    handlePointRules() {
      if(this.data.stationPoint == null) {
        this.$message.warning('请先配置站点和参数点')
        return
      }
      if(this.data.stationPoint.stationId == '') {
        this.$message.warning('请先配置站点')
        return
      }
      if(this.data.stationPoint.pointId == '') {
        this.$message.warning('请先配置参数点')
        return
      }
      
      this.title = `[${this.data.stationPoint.stationName}] [${this.data.stationPoint.pointName}] 配置参数规则`
      this.pointRulesTableDataDialog = []
      this.formData.forEach(v => {
        this.pointRulesTableDataDialog.push(v)
      })
      this.pointRulesVisible = true
    },
    /*新增一条参数点规则*/
    handleAddPointRule() {
      this.pointRulesTableDataDialog.push({
        pointValue: 0,
        descriptions: '',
        imgUrl: '',
      })
    },
    /*弹窗里的图片上传change事件*/
    handleImgChange(val, row) {
      row.imgUrl = val
    },
    /*面板里的图片上传change事件*/
    handleImgChangeDirect(val, row) {
      this.handleImgChange(val, row) // 触发change
      this.handleSaveClick() // 直接向上反馈状态
    },
  }
};
</script>
<style lang="scss" scoped>
.color-box {
  .title {
    display: flex;
    flex-direction: row;
  }
}
/deep/.el-table,
/deep/.el-table__expanded-cell,
/deep/.el-table th,
/deep/.el-table tr {
  background-color: transparent !important;
  color: #859094 !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border-bottom: none;
  line-height: 26px;
}
/deep/.el-table tbody tr:hover > td {
  background-color: #263445 !important;
}
/deep/.el-table::before {
  height: 0;
}
/deep/.el-color-picker--mini,
/deep/.el-color-picker--mini .el-color-picker__trigger {
  width: 23px;
  height: 23px;
}
/deep/.el-dialog {
  background: #1b1e25;
  .el-dialog__title {
    color: #fff;
  }
}
.color-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.editor {
  color: #409eff;
  cursor: pointer;
}
</style>
